<template>
  <div class="text_area" ref="replyDiv">
    <el-avatar
      class="avatar-animate"
      :src="userStore.avatar"
      @error="avatarErrorHandle"
      :size="appStore.isMobile ? 25 : 50"
    />
    <div class="text_area_content">
      <textarea
        @blur="onBlur"
        ref="textarea"
        :class="{ bg: props.reply, w50: props.reply }"
        id="input"
        cols="30"
        rows="5"
        :maxlength="props.maxLength"
        :placeholder="props.placeholder"
      ></textarea>
      <div class="text_area_content_increment" :class="{ w50: props.reply }">
        <span @mousedown="addComment">添加评论</span>
      </div>
      <div :class="{ w53: props.reply }"></div>
    </div>
  </div>
</template>

<script setup>
  import { ref } from 'vue'
  import useAppStore from '@/store/appStore'
  import useUserStore from '@/store/userStore'

  const userStore = useUserStore()
  const appStore = useAppStore()
  const replyDiv = ref(null)
  const textarea = ref(null)
  const props = defineProps({
    reply: {
      type: Boolean,
      default: false,
    },
    placeholder: {
      type: String,
      default: '说点什么吧...',
    },
    maxLength: {
      type: Number,
      default: 200,
    },
  })
  const emit = defineEmits(['onAddComment', 'onBlur'])
  const addComment = () => {
    emit('onAddComment', textarea.value.value, replyDiv.value.id)
  }
  const onBlur = () => {
    emit('onBlur', replyDiv.value.id)
  }
  const avatarErrorHandle = event => {
    console.log(event)
  }
  const reset = () => {
    textarea.value.value = ''
  }
  defineExpose({
    reset,
  })
</script>

<style lang="less" scoped>
  @media only screen and (min-width: 991px) {
    .text_area {
      display: flex;
      width: 100%;
      justify-content: space-around;
      .text_area_content {
        flex: 1;
        margin-left: 15px;
        #input {
          width: 96%;
          background: var(--background-primary);
          resize: vertical;
          padding: 16px;
          border-radius: 10px;
          font-size: 16px;
          overflow: auto;
          color: var(--text-bright);
          border: none;
          outline: none;
        }
        .text_area_content_increment {
          position: relative;
          height: 50px;
          span {
            position: absolute;
            top: 5px;
            right: 5px;
            width: 80px;
            height: 35px;
            margin-left: 20px;
            text-align: center;
            line-height: 35px;
            font-size: 14px;
            color: #fff;
            background: var(--main-gradient);
            border-radius: 8px;
            cursor: pointer;
          }
        }
        div {
          &:nth-of-type(2) {
            width: 98%;
            height: 2px;
            background: var(--text-normal);
            margin-top: 24px;
          }
        }
      }
    }
    .w50 {
      width: 50% !important;
    }
    .w53 {
      width: 53% !important;
    }
  }

  @media only screen and (max-width: 990px) {
    .text_area {
      display: flex;
      width: 100%;
      justify-content: space-around;
      .text_area_content {
        flex: 1;
        #input {
          width: 95%;
          background: var(--background-primary);
          resize: vertical;
          padding: 6px;
          border-radius: 10px;
          font-size: 12px;
          overflow: auto;
          color: var(--text-bright);
          border: none;
          outline: none;
        }
        .text_area_content_increment {
          position: relative;
          height: 50px;
          span {
            position: absolute;
            top: 5px;
            right: 0;
            padding: 8px;
            text-align: center;
            font-size: 10px;
            color: #fff;
            background: var(--main-gradient);
            border-radius: 8px;
          }
        }
        div {
          &:nth-of-type(2) {
            width: 100%;
            height: 2px;
            background: var(--text-normal);
            margin-top: 5px;
          }
        }
      }
    }
    .w50 {
      width: 93% !important;
    }
    .w53 {
      width: 93% !important;
    }
  }

  .bg {
    background: var(--background-secondary) !important;
  }
</style>
